<template>
    <div class="min-h-screen flex items-center justify-center">
        <div class="bg-white p-8 rounded shadow-md">
            <h1 class="text-2xl font-semibold mb-4">登录</h1>
            <div  v-if="isLoginMode" class=" w-96">
                <!-- Existing username and password fields -->
                <div class="mb-4">
                    <label for="username" class="block text-sm font-medium text-gray-600">用户名</label>
                    <input v-model="username" type="text" id="username" name="username" class="mt-1 p-2 border w-full"
                        required />
                </div>
                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-600">密码</label>
                    <input v-model="password" type="password" id="password" name="password" class="mt-1 p-2 border w-full"
                        required />
                </div>
                <!-- New email field -->
                <!-- <div class="mb-4">
                    <label for="email" class="block text-sm font-medium text-gray-600">Email</label>
                    <input v-model="email" type="email" id="email" name="email" class="mt-1 p-2 border w-full" required />
                </div> -->
                <button  class="w-full bg-blue-500 text-white p-2 rounded" @click="login">登录</button>
                <p class="mt-2 text-sm text-gray-500">没有账号? <button @click="toggleMode"
                        class="text-blue-500 underline cursor-pointer">注册</button></p>

            </div>
            <div  v-else class="w-96">
                <!-- Existing email, username, and password fields -->
                <div class="mb-4">
                    <label for="email" class="block text-sm font-medium text-gray-600">邮箱</label>
                    <input v-model="email" type="email" id="email" name="email" class="mt-1 p-2 border w-full" required />
                </div>
                <div class="mb-4">
                    <label for="username" class="block text-sm font-medium text-gray-600">用户名</label>
                    <input v-model="username" type="text" id="username" name="username" class="mt-1 p-2 border w-full"
                        required />
                </div>
                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-600">密码</label>
                    <input v-model="password" type="password" id="password" name="password" class="mt-1 p-2 border w-full"
                        required />
                </div>
                <button @click="register" class="w-full bg-blue-500 text-white p-2 rounded">注册</button>
                <p class="mt-2 text-sm text-gray-500">已经有账号了? <button @click="toggleMode"
                        class="text-blue-500 underline cursor-pointer">登录</button></p>
            </div>
        </div>
    </div>
</template>

<script>
import { registerUser, loginUser } from '@/boot/requests';
import { ElMessage } from 'element-plus';
export default {
    data() {
        return {
            isLoginMode: true,
            email: '',
            username: '',
            password: '',
        };
    },
    methods: {
        toggleMode() {
            this.isLoginMode = !this.isLoginMode;
        },
        login() {
            console.log('Login with:', this.username, this.password, this.email);
            let payload = {
                username: this.username,
                password: this.password
            }
            fetch("http://localhost:8000/login/?username="+this.username+"&password="+this.password)
                .then(res=>res.json()).then(res=>{
                             //     let data = res.data
                if (res.code !== 200) {
                    ElMessage.error('登录失败')
                    return
                }
                ElMessage.success('登录成功')
                localStorage.setItem('username', this.username)
                localStorage.setItem('userId', res.data[0].user_id)
                this.$router.push({ name: 'index' })
            })
            // loginUser(payload).then(res => {
            //     let data = res.data
            //     if (data.code !== 200) {
            //         ElMessage.error('登录失败')
            //         return
            //     }
            //     ElMessage.success('登录成功')
            //     localStorage.setItem('username', this.username)
            //     localStorage.setItem('userId', data.data[0].user_id)
            //     this.$router.push({ name: 'index' })
            // })
        },
        register() {
            // Handle registration logic here
            let payload = {
                email: this.email,
                username: this.username,
                password: this.password

            }
            registerUser(payload).then(res => {
                let data = res.data
                if (data.code !== 200) {
                    ElMessage.error('注册失败')
                    return
                }
                ElMessage.success('注册成功')
            })
            console.log('Register with:', this.email, this.username, this.password);
        },
    },
};
</script>

<style scoped>
/* Add scoped styles here if needed */
</style>
